<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>付款成功</title>
</head>
<style>
    .top-title:hover{
        cursor: pointer;
        color: #b31e22!important;
        underline: #b31e22!important;
    }

    .SearchBar input {
        height: 50px;
        width: 500px;
    }
    .selectBar {
        height: 60px;
    }
    .menuList{
        background-color: #efd0d0 !important;
        color: #FFFFFF!important;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>
<body>
<div id="app">
    <!--顶部用户导航栏-->
    <template>
        <div style="font-size: 14px;">
            <div style="display: flex;height: 60px;padding: 0 320px;background-color: #f5f5f5;border-radius: 10px">
                <div v-show="visibleAlready" style="margin-top: 3px">
                    <el-col :span="6">
                        <el-avatar style="height: 50px;width:50px;" :src="User.userImg"></el-avatar>
                    </el-col>
                    <el-col :span="18" style="line-height:50px">
                        <span style="padding-right: 30px;line-height: 40px;color: #666;margin-left:30px">{{User.realName}}</span>
                    </el-col>
                </div>
                <div v-show="visibleNotYet" style="margin-top: 10px">
                    <span style="padding-right: 20px;line-height: 40px;color: #666;">欢迎光临淘书网,请</span>
                    <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpLogin">登录</el-button>
                    <span style="padding-right: 20px;line-height: 40px;">|</span>
                    <el-button type="text" style="color: #666" class="top-title" @click="jumpRegister">注册</el-button>
                </div>
                <div style="flex: 1;display: flex;">
                    <div style="flex: 0.75;"></div>
                    <div style="width: 300px;display: flex;">
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpPersonalCenter"> <i class="el-icon-user"></i>个人中心</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpOrders"><i class="el-icon-goods"></i>我的订单</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCollect"><i class="el-icon-star-off"></i>我的收藏</el-button>
                        <el-button type="text" v-show="visibleAlready" style="color: #666;margin-right: 10px;" class="top-title" @click=" killSession"><i class="el-icon-switch-button"></i>退出登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <div style="margin-left: 300px;margin-right: 300px;margin-top: 20px" >
        <el-steps :active="3" finish-status="success"  align-center :space="300">
            <el-step title="选择图书"></el-step>
            <el-step title="确认地址"></el-step>
            <el-step title="订单核对"></el-step>
            <el-step title="付款成功"></el-step>
        </el-steps>
        <div style="margin-top: 100px">
            <img src="../img/pay/paySuccess.jpg" style="width:350px;height: 100px"></img>
            <div  style="margin-top: 50px">
                <el-link @click="jumpIndex" type="primary"><span style="font-size: 25px">返回首页</span></el-link>
                <el-link @click="jumpOrders" type="primary" style="margin-left: 100px">
                    <span style="font-size: 25px">
                    前往我的订单
                    </span></el-link>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<<script>
    new Vue({
        el: '#app',
        created() {
            //钩子函数，vue对象初始化后执行
            this.getUser()
        },
        mounted() {
            //页面加载完成后，发送异步请求，获取所有数据

        },
        methods: {
            getUser() {//获取用户名
                //发送ajax请求
                axios({
                    method:"get",
                    url:"/user",
                }).then(resp =>{
                    this.User = resp.data;
                    console.log(this.User.realName);
                    if (this.User !== null && this.User !== ""&& this.User !==undefined) {
                        this.visibleNotYet = false;
                        this.visibleAlready= true;
                    }else{this.User={username:null}}
                })
            },
            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.visibleNotYet = true;
                    this.visibleAlready = false;
                    //发送ajax请求
                    axios.post("/user/logout").then((res) => {
                    })
                    window.location.href = "../index.html"
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            jumpIndex(){
                location.href ="/index.html"
            },

            jumpLogin(){
                location.href ="/login_page/login.jsp";
            },
            jumpCollect(){
                location.href ="/user_page/collect.html";
            },
            jumpRegister(){
                location.href ="/login_page/register.jsp";
            },
            jumpPersonalCenter(){
                location.href ="personCenter.html";
            },
            jumpCart(){
                location.href ="cart.html";
            },
            jumpOrders(){
                location.href ="orders.html";
            }
        },
        data() {
            return {
                User:[],//用户信息
                visibleNotYet:true,
                visibleAlready:false,
                input:'',

            }
        }
    })
</script>
</html>